<template>
	<view class="cart-box">
		<view class="" v-if="list.length">
			<my-goods  @delete='deleteone' :index='index' @jiaNum='jiaNum' @jianNum='jianNum' @submitCheck='submitCheck' :info="item" v-for="(item, index) in list" :key="index"></my-goods>
			
		</view>
		 <view class="cart-empty" v-else>
		   <image src="../../static/empt.png" mode=""></image>
		   <text class="empty">您的购物车什么都没有~</text>
		   <button type="default" class="empty-btn" @click="$go('/pages/shop/goods-list')">去逛逛</button>
		 </view>
			   <checkbox-group @change="changeAll">
		<view class="my-settle-container goods-list">
		  <view class="my-settle-left">
		    <label class="全选">
		      <checkbox :checked="isAll" style="transform: scale(.7);"/>
		      <text class="chooseAll">全选</text>
		    </label>
		  </view>
		  <view class="my-settle-middle">
		    总金额:<text>￥{{allPrice}}</text>
			<!-- <text class="point">1500积分</text> -->
		  </view>
		  <view class="my-settle-right" @click="settlement">
		    <text class="settle">去结算</text>
		    <text class="money">(运费: ￥0.00)</text>  
		  </view>
		</view>
		</checkbox-group>
	</view>
	<!-- <button type="default" @click="handle">123</button> -->
</template>

<script>
import myGoods from '../../components/my-goods/my-goods.vue';
import mySettle from '../../components/my-settle/my-settle.vue';
export default {
	data() {
		return {
			pageSize: 10,
			pageIndex: 1,
			list: [],
			finish: false,
		};
	},
	components: {
		mySettle,
		myGoods
	},
	computed:{
		isAll(){
			return !this.list.filter(val => val.checked == false).length
		},
		allPrice(){
			return this.list.map(item => {
				if(item.checked){
					return item.price * item.count
				}else{
					return 0
				}
			}).reduce((total,num) => total + num,0)
		}
	},
	methods: {
		deleteone(e){
			let that = this
			uni.showModal({
				title: '警告',
				content: '确定删除该商品？',
				showCancel: true,
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if(res.confirm){
						that.$ajax('api/ShoppingCar/Delete',{list:[{id:e.id}]}).then(pose => {
							that.list.splice(e.index,1)
							uni.showToast({
								title: '删除成功'
							});
						})
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		settlement(){
			let data ={ 
				list:this.list.filter(item => item.checked == true).map(item => {
					return {
						id:item.id
					}
				})
			}
			this.$ajax('api/Order/ShoppingPlaceOrderInit',data).then(res => {
				this.$store.commit('CHANGE_INITORDER',JSON.stringify(res.Data))
				uni.navigateTo({
					url:'../shop/order-detail?type=cart'
				})
			})
		},
		jiaNum(e){
			this.$ajax('api/ShoppingCar/JiaShopping',{id:e.id}).then(res => {
				let row = this.list[e.index]
				this.$set(row,'count',row.count+1)
			})
		},
		jianNum(e){
			console.log(e)
			this.$ajax('api/ShoppingCar/JianShopping',{id:e.id}).then(res => {
				let row = this.list[e.index]
				this.$set(row,'count',row.count-1)
			})
		},
		handle() {
			uni.navigateTo({
				url: '../user/my-team1'
			});
		},
		submitCheck(e){
			let row = this.list[e.index]
			this.$set(row,'checked',e.type)
		},
		changeAll(e){
				this.list.map(item => {
					item.checked = e.detail.value.length? true : false
					return item
				})
		},
		getlist() {
			this.$ajax('api/ShoppingCar/QueryGoods', { pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
				if (res.Data.list.length) {
					this.list = this.list.concat(
						res.Data.list.map(item => {
							item.checked = false;
							return item;
						})
					);
					this.pageIndex++;
					this.finish = false;
				} else {
					this.finish = true;
				}
				uni.hideLoading();
			});
		}
	},
	onShow() {
		this.pageIndex = 1
		this.list = []
		this.getlist();
	},
	onReachBottom() {
		uni.showLoading({
			title: '加载中'
		});
		if (!this.finish) {
			this.getlist();
		}else{
			uni.hideLoading()
		}
	}
};
</script>

<style lang="scss">
	.cart-empty {
	  display: flex;
	  padding: 200rpx 0 0;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  image {
	    width: 160rpx;
	    height: 160rpx;
	  }
	  .empty {
	    color: #666666;
	    font-size: 22rpx;
	    margin-top: 40rpx;
	  }
	  .empty-btn {
	    width: 280rpx;
	    height: 70rpx;
	    background: #202029;
	    border-radius: 35rpx;
	    margin-top: 73rpx;
	    text-align: center;
	    line-height: 70rpx;
	    color: #ffffff;
	    font-size: 24rpx;
	  }
	}
	.nodata{
		font-size: 25rpx;
		color: #999;
		padding: 200rpx 0 0;
	}
	.my-settle-container {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  height: 90rpx;
	  width: 100%;
	  background-color: #FFFFFF;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  .my-settle-right {
	    width: 230rpx;
	    height: 90rpx;
	    background-color: #DCC68D;
	    color: #ffffff;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    .settle {
	      font-size: 30rpx;
	    }
	    .money{
	      font-size: 20rpx;
	      margin-top: 13rpx;
	    }
	  }
	  .my-settle-middle {
	    font-size: 24rpx;
	    .point{
	      color: #DCC68D;
	    }
	  }
	  
	  .my-settle-left {
	    .chooseBtn{
	     transform:scale(0.7)
	    }
	    .chooseAll {
	      // margin-left: 14rpx;
	      font-size: 24rpx;
	    }
	  }
	}
	
.cart-box {
	background-color: #f4f4f4;
	min-height: 100vh;
}
.my-points {
	.title {
		width: 750rpx;
		height: 298rpx;
		background-color: #202029;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.figure {
			font-size: 48rpx;
			color: #ffffff;
			margin-bottom: 76rpx;
		}

		.yue {
			font-size: 28rpx;
			color: #bebee9;
		}
	}
}
</style>
